.percent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.inner {
		position: relative;
		display: flex;
		width: 4rem;
		height: 4rem;

		svg {
			width: 100%;

			.background {
				transition: stroke-dashoffset 0.3s ease 0s,
					stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s,
					stroke-width 0.06s ease 0.3s;
				stroke: var(--color-bg-2);
				stroke-dasharray: 295.31px, 295.31px;
				stroke-dashoffset: 0;
			}

			.foreground {
				transition: stroke-dashoffset 0.3s ease 0s,
					stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s,
					stroke-width 0.06s ease 0.3s;
				stroke: currentColor;
				stroke-dashoffset: 0;
			}
		}

		.percent-num {
			position: absolute;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}
	}

	.label {
		margin-top: 0.5rem;
	}
}
